<template>
    <q-page class="">
      <div class="column items-center justify-center">
        <div class="text-dark" style="width: 40rem">
          <h5>Change Password</h5>
          <div class="q-gutter-md q-pa-md">
            <div class="login-input">
              <q-input
                class=" q-px-md"
                v-model="old_password"
                hide-bottom-space
                borderless
                dense
                stack-label
                type="password"
                @keydown.enter="confirm()"
                label="Old Password"
                labelColor="indigo-13"
                :rules="[ val => val.length >= 6 || 'Please use at least 6 characters' ]"
              >

              </q-input>
            </div>

            <div class="login-input">
              <q-input
              class=" q-px-md"
                v-model="new_password"
                hide-bottom-space
                borderless
                dense
                stack-label
                type="password"
                @keydown.enter="confirm()"
                label="New Password"
                labelColor="indigo-13"
                :rules="[ val => val.length >= 6 || 'Please use at least 6 characters' ]"
              >

              </q-input>
            </div>
            

            <div class="login-input">
              <q-input
              class=" q-px-md"
                v-model="confirm_new_password"
                hide-bottom-space
                borderless
                dense
                stack-label
                type="password"
                @keydown.enter="confirm()"
                label="Confirm New Password"
                labelColor="indigo-13"
                :rules="[ val => val.length >= 6 || 'Please use at least 6 characters' ]"
              >

              </q-input>
            </div>
  
            <div class="row">
              <q-btn
                square
                class="default-btn full-width"
                label="CONFIRM"
                @click="confirm"
              />
            </div>
          </div>
        </div>
      </div>
    </q-page>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { useUser } from 'src/stores/userStore';
  import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';

  const new_password = ref();
  const confirm_new_password = ref();
  const old_password = ref();
  
  const reme = ref(false);
  
  const user = useUser();
  
  const router = useRouter();

  const q = useQuasar()
  
  async function confirm() {
    if (old_password.value && new_password.value && confirm_new_password.value &&new_password.value !== confirm_new_password.value){
      q.notify({
        message: 'The new password and the confirm password are inconsistent.',
        color:'red'
      })
    }else{
      const data = await user.changePassword(old_password.value , confirm_new_password.value ,new_password.value)
      if (data.code==1){
      q.notify({
        message: data.message,
        color:'green'
      })
      user.logout()
        router.push({
        name: 'login',
      });
      }
      if (data.code==0){
        q.notify({
          message: data.message,
          color:'red'
        })
      }
    }
    
    // if (res) {
    //   router.push({
    //     name: 'login',
    //   });
    // }
  }
  </script>
  
  <style scoped lang="scss">
  .container {
    background-color: #f8f8f8;
  }
  
  .card {
    width: 400px;
    background-color: #fff;
    color: #000;
    border-radius: 1rem;
  }
  
  h5 {
    // background: linear-gradient(184.84deg, #5968f6 23.39%, #2c37b4 96.1%);
    color: #5e5feb;
    margin: 1rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
  }
  
  .login-input{
    border: 1px solid #5e5feb;
    border-radius: 5rem;
    padding: 0 1rem ;
  }
  
  .my-checkbox{
    color: #5e5feb;
  
  }
  
  ::v-deep(.q-checkbox__bg){
    border-radius: 10rem;
    color: #5e5feb;
  }
  </style>
  